<template>
  <div class="edit-address">
    <div class="edit-address-header border-bottom">
      <div class="back-icon" @click="goBack">
        <i class="el-icon-arrow-left">返回</i>
      </div>
      <div class="edit-address-title">
        <p>新增地址</p>
      </div>
      <div class="save-address" @click="save">
        <span>保存</span>
      </div>
    </div>
    <div class="edit-addrss-content">
      <div class="content-box border-bottom">
        <div class="content-title content-cell">
          <span>姓名</span>
        </div>
        <div class="content-value">
          <el-input v-model="newAddressInfo.username" placeholder="请输入你的姓名"></el-input>
        </div>
      </div>
      <div class="content-box border-bottom">
        <div class="content-title content-cell">
          <span>手机号码</span>
        </div>
        <div class="content-value">
          <el-input v-model="newAddressInfo.phone" placeholder="请输入你的手机号码"></el-input>
        </div>
      </div>
      <div class="content-box border-bottom">
        <div class="content-title content-cell">
          <span>地址</span>
        </div>
        <div class="content-value">
          <el-input v-model="newAddressInfo.address" placeholder="请输入你的地址"></el-input>
        </div>
      </div>
      <div class="content-box border-bottom">
        <div class="content-title content-cell default-item">
          <span>设置为默认地址</span>
        </div>
        <div class="content-value default-value">
          <el-switch
            v-model="newAddressInfo.default_address"
            active-color="#13ce66"
            inactive-color="#ff4949">
          </el-switch>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Edit_address",
    data () {
      return {
        newAddressInfo: {
          username: '',
          phone: '',
          address: '',
          default_address: false
        }
      }
    },
    methods: {
      goBack () {
        this.$router.push('/address')
      },
      save () {
        console.log(111)
      }
    }
  }
</script>

<style lang="stylus" scoped>
  .edit-address >>> .el-input__inner
    border: 0;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
  /* header */
  .edit-address-header
    width: 100%;
    height: 50px;
    background: #fff;
    .edit-address-title,.back-icon
      float: left;
      color: #666;
      text-align: center;
    .back-icon
      width: 20%;
      line-height: 50px;
      z-index: 2;
      color: #1989fa;
      font-size: 16px;
    .edit-address-title
      width: 60%;
      line-height: 50px;
      font-size: 18px;
    .edit-address-title p
      margin: 0;
    .save-address
      width: 20%;
      float: left;
      text-align: center;
      line-height: 50px;
      font-size: 15px;
      font-weight: 500;
      color: #666;
    .save-address span
      padding: 6px 8px;
      background: #f7f7f7;
      border-radius: 3px;
      color: cornflowerblue;
      font-size: 14px;
  .edit-addrss-content
    .content-value
      flex: 2

  /* 内容 */
  .content-box, .content-cell
    display: flex;
  .content-box
    padding: 10px 15px;
    line-height: 30px;
    color: #666;
    font-size: 14px;
  .content-cell
    flex: 1;
  .content-title
    max-width: 90px;
  .default-item
    max-width:100px
  .default-value
    text-align: right;
    flex: 2;
</style>
